<!--课程考核实施计划变更申请记录-->
<template>
  <div class="assessment-container change-record-assessment-container">
    <div class="search-container">
      <div class="search-container-left">
        <div class="search-container-item">
          <span>开学学期：</span>
          <el-select
            v-model="termid"
            style="width: 90px"
            size="mini"
            placeholder="请选择"
          >
            <el-option
              v-for="item in xqList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="search-container-item">
          <span>修习类型：</span>
          <el-select
            v-model="studytype"
            style="width: 90px"
            size="mini"
            placeholder="请选择"
          >
            <el-option
              v-for="item in xxlxList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="search-container-item">
          <span>状态：</span>
          <el-select
            size="mini"
            v-model="modifystrtus"
            style="margin-left: 20px; width: 200px"
            @change="change"
            placeholder="请选择"
          >
            <el-option
              v-for="item in ztList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="search-button" @click="selectApply">
          <img src="../../../assets/assessment/icon-search.png" alt="" />
          <span>查询</span>
        </div>
      </div>
    </div>
    <div class="table-container">
      <div class="table-header">
        <div class="item" style="width: 114px">状态/操作</div>
        <div class="item" style="width: 85px">系</div>
        <div class="item" style="width: 90px">教研室</div>
        <div class="item" style="width: 92px">课程编号</div>
        <div class="item" style="width: 96px">课程名称</div>
        <div class="item" style="width: 102px">培养层次</div>
        <div class="item" style="width: 126px">修习类型</div>
        <div class="item" style="width: 144px">课程负责人</div>
        <div class="item" style="width: 125px">变更原因</div>
        <div class="item" style="width: 198px">课下作业所占比例</div>
        <div class="item" style="width: 197px">课堂测评所占比例</div>
        <div class="item" style="width: 197px">期中考试所占比例</div>
        <div class="item" style="width: 192px">课终考核所占比例</div>
      </div>
      <div class="table-body" v-for="(item, index) in tableData" :key="index">
        <div class="item ztcz">
          <div class="ztcz-zt" v-if="+item.status === -1">未提交</div>
          <div class="ztcz-zt" v-if="+item.status === 0">待审批</div>
          <div class="ztcz-zt" v-if="+item.status === 1">已审批</div>
          <div
            class="ztcz-save"
            v-show="item.status"
            v-if="+item.status === 0"
            @click="teaSubmit(item.id,)"
          >
            <img
              src="../../../assets/assessment/icon-plan-record-save.png"
              alt=""
            />
            <span>提 交</span>
          </div>
          <div
            class="ztcz-detail"
            @click="
              RouterTo('/teacher/assessment/changePlanDetail', item.modifyid)
            "
          >
            <img
              src="../../../assets/assessment/icon-plan-record-detail.png"
              alt=""
            />
            <span>详 情</span>
          </div>
        </div>
        <div class="item" style="width: 85px">{{ item.department }}</div>
        <div class="item" style="width: 90px">
          {{ item.teachingandresearchsection }}
        </div>
        <div class="item" style="width: 92px">{{ item.coursenumber }}</div>
        <div class="item" style="width: 96px">{{ item.coursename }}</div>

        <div class="item-border right-content">
          <div class="right-content-info">
            <div class="item" style="width: 102px">
              {{ item.traininglevel }}
            </div>
            <div class="item" style="width: 126px">{{ item.studytype }}</div>
            <div class="item" style="width: 144px">
              {{ item.coursemanager }}
            </div>
            <div class="item" style="width: 125px">{{ item.changereason }}</div>
            <div class="item" style="width: 198px">
              <div>
                {{ item.oldusualscoreratealter }} %修改为
                <span style="color: #fb563c"
                  >{{ item.usualscoreratealter }}%</span
                >
              </div>
            </div>
            <div class="item" style="width: 197px">
              <div>
                {{ item.oldexamscoreratealter }} %修改为
                <span style="color: #fb563c"
                  >{{ item.examscoreratealter }}%</span
                >
              </div>
            </div>
            <div class="item" style="width: 197px">
              <div>
                {{ item.oldmidtermscoreratealter }} %修改为
                <span style="color: #fb563c"
                  >{{ item.midtermscoreratealter }}%</span
                >
              </div>
            </div>
            <div class="item" style="width: 192px">
              <div>
                {{ item.oldexperimentscoreratealter }} % 修改为
                <span style="color: #fb563c"
                  >{{ item.experimentscoreratealter }}%</span
                >
              </div>
            </div>
          </div>
          <div class="spjd">
            <div class="spjd-title">排考进度：</div>
            <div class="time-line-horizon">
              <div
                class="time-line-block"
                v-for="(block, index1) in item.shspeeds"
                :key="index1"
              >
                <div class="person-name">{{ block.reviewer }}</div>
                <div class="line-content">
                  <img
                    src="../../../assets/assessment/icon-finish.png"
                    alt="已审批"
                    v-if="+block.status === 1"
                  />
                  <img
                    src="../../../assets/assessment/icon-dai.png"
                    alt="待审批"
                    v-if="+block.status === 0"
                  />
                  <img
                    src="../../../assets/assessment/icon-close.png"
                    alt="未审批"
                    v-if="+block.status === -1"
                  />
                  <div class="date-time">
                    <span class="date">{{ block.checktime }}</span>
                    <span class="time">{{ block.chenckdate }}</span>
                  </div>
                </div>
                <div class="operate" v-if="index1 === 0">
                  <div
                    class="ly-block"
                    @click="buttonClick('留言', block, index)"
                  >
                    <img src="../../../assets/assessment/icon-ly.png" alt="" />
                    <div class="ly">留言</div>
                  </div>
                </div>
                <div class="operate" v-show="block.leaving" v-if="index1 !== 0">
                  <div class="bubble-block" style="width: 255px">
                    <span
                      @click="buttonClick('查看', block, index)"
                      style="
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: block;
                      "
                      >{{ block.leaving }}</span
                    >
                    <div class="operate-button">
                      <div
                        class="button-ck"
                        @click="buttonClick('查看', block)"
                        v-show="block.leaving"
                        v-if="index1 !== 0"
                      >
                        查看
                      </div>
                      <div
                        class="button-bj"
                        @click="buttonClick('编辑', block)"
                        v-show="block.leaving"
                        v-if1="index1 !== 0"
                      >
                        编辑
                      </div>
                      <div
                        @click="buttonClick('删除', block)"
                        class="button-sc"
                        v-show="block.leaving"
                        v-if="index1 !== 0"
                      >
                        删除
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      title="添加留言"
      :visible.sync="showAddMessageDialog"
      width="983px"
    >
      <div class="message-container">
        <div>添加留言：</div>
        <div>
          <el-input
            v-model="message.text"
            type="textarea"
            :rows="8"
            style="width: 550px"
          ></el-input>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <button class="green" @click="addText">确 定</button>
      </span>
    </el-dialog>
    <el-dialog
      title="编辑留言"
      :visible.sync="showbjMessageDialog"
      width="983px"
    >
      <div class="message-container">
        <div>编辑留言：</div>
        <div>
          <el-input
            v-model="message.leaving"
            type="textarea"
            :rows="8"
            style="width: 550px"
          ></el-input>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <button class="green" @click="update">确 定</button>
      </span>
    </el-dialog>
    <el-dialog
      title="查看留言"
      :visible.sync="showckMessageDialog"
      width="983px"
    >
      <div class="message-container">
        <div>查看留言：</div>
        <div>
          <!--                        v-model="block.bjmeaasgeText"-->
          <el-input
            v-model="message.leaving"
            type="textarea"
            :rows="8"
            style="width: 550px"
            disabled="false"
          ></el-input>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <button class="green" @click="showckMessageDialog = false">
          确 定
        </button>
      </span>
    </el-dialog>
    <div class="bottom-block">
      <div class="export-button">
        <img src="../../../assets/assessment/icon-export.png" alt="" />
        <!--        <span>导出Excel</span>-->
        <download-excel
          class="export-btn"
          :data="tableData"
          :fields="jsonFields"
          type="xls"
          name="课程考核实施变更申请记录.xls"
          style="color: #f3b815"
        >
          &ensp;导出Excel
        </download-excel>
      </div>
    </div>
  </div>
</template>

<script>
import {
  hcheckUpdate,
  getCheckDetail,
  updateMessage,
} from "../../../api/courseExame/courseExa";
import { queryTeacherCourseCheck } from "@/api/courseExame/courseExa";
import { addMessage } from "@/api/courseExame/courseExa";
import { insertCourseModify } from "@/api/courseExame/courseExa";
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      status: "",
      message: {
        text: "",
      },
      text: "",
      pid: undefined,
      termid: undefined,
      xqList: [
        {
          value: "2020春",
          label: "2020春",
        },
        {
          value: "2020夏",
          label: "2020夏",
        },
      ],
      studytype: undefined,
      xxlxList: [
        {
          value: "选修",
          label: "选修",
        },
        {
          value: "必修",
          label: "必修",
        },
      ],
      modifystrtus: undefined,
      ztList: [
        {
          value: "未提交",
          label: "未提交",
        },
        {
          value: "已提交",
          label: "已提交",
        },
      ],

      tableData: [
        {
          modifyid: "1478269869428719618",
          modifystrtus: "待审核",
          department: "计算机系",
          coursename: "计算机基础",
          coursenumber: "452635",
          teachingandresearchsection: "教研室1",
          traininglevel: "研究生",
          studytype: "选修",
          coursemanager: "李教员",
          changereason: "调整错误",
          oldusualscoreratealter: "15",
          usualscoreratealter: "16",
          oldexamscoreratealter: "30",
          examscoreratealter: "15",
          oldmidtermscoreratealter: "16",
          midtermscoreratealter: "15",
          oldexperimentscoreratealter: "16",
          experimentscoreratealter: "16",
          shspeeds: [
            {
              submitidentifying: "教员",
              couchecktime: "2021-06-04",
              couapplytime: "17：52",
              url: "icon-finish",
              leaving: "留言",
              coucheckstatus: "3",
            },
            {
              submitidentifying: "教研室主任",
              couchecktime: "2021-06-04",
              couapplytime: "17：52",
              url: "icon-finish",
              leaving: "留言",
              coucheckstatus: "2",
            },
            {
              submitidentifying: "领导3",
              couchecktime: "2021-06-05",
              couapplytime: "10：52",
              url: "icon-finish",
              leaving: "留言",
              coucheckstatus: "1",
            },
            {
              submitidentifying: "领导4",
              couchecktime: "2021-06-10",
              couapplytime: "17：52",
              url: "icon-finish",
              leaving: "留言",
              coucheckstatus: "1",
            },
            {
              submitidentifying: "领导5",
              couchecktime: "2021-06-14",
              couapplytime: "17：52",
              url: "icon-finish",
              leaving: "留言",
              coucheckstatus: "1",
            },
          ],
        },
        {
          modifyid: "1478269869428719618",
          modifystrtus: "待审核",
          department: "计算机系",
          coursename: "计算机基础",
          coursenumber: "452635",
          teachingandresearchsection: "教研室1",
          traininglevel: "研究生",
          studytype: "选修",
          coursemanager: "李教员",
          changereason: "调整错误",
          oldusualscoreratealter: "15",
          usualscoreratealter: "16",
          oldexamscoreratealter: "30",
          examscoreratealter: "15",
          oldmidtermscoreratealter: "16",
          midtermscoreratealter: "15",
          oldexperimentscoreratealter: "16",
          experimentscoreratealter: "16",
          leaving: "留言",
          shspeeds: [
            {
              submitidentifying: "教员",
              couchecktime: "2021-06-04",
              couapplytime: "17：52",
              url: "icon-finish",
              leaving: "留言",
              coucheckstatus: "3",
            },
            {
              submitidentifying: "教研室主任",
              couchecktime: "2021-06-04",
              couapplytime: "17：52",
              url: "icon-dai",
              leaving: "留言",
              coucheckstatus: "2",
            },
            {
              submitidentifying: "领导3",
              couchecktime: "2021-06-05",
              couapplytime: "10：52",
              url: "icon-dai",
              leaving: "留言",
              coucheckstatus: "1",
            },
            {
              submitidentifying: "领导4",
              couchecktime: "2021-06-10",
              couapplytime: "17：52",
              url: "icon-close",
              leaving: "留言",
              coucheckstatus: "1",
            },
            {
              submitidentifying: "领导5",
              couchecktime: "2021-06-14",
              couapplytime: "17：52",
              url: "icon-close",
              leaving: "留言",
              coucheckstatus: "1",
            },
          ],
        },
      ],
      jsonFields: {
        状态: "modifystrtus",
        系: "department",
        教研室: "teachingandresearchsection",
        课程编号: "coursenumber",
        课程名称: "coursename",
        培养层次: "traininglevel",
        修习类型: "studytype",
        课程负责人: "coursemanager",
        变更原因: "changereason",
        原课下作业占比: "oldusualscoreratealter",
        修改课下作业占比: "usualscoreratealter",
        原课堂测试占比: "oldexamscoreratealter",
        修改课堂测试占比: "examscoreratealter" + "%",
        原期中考试占比: "oldmidtermscoreratealter",
        修改期中考试占比: "midtermscoreratealter",
        原课终考核占比: "oldexperimentscoreratealter",
        修改课终考核占比: "experimentscoreratealter",
      },

      //添加留言
      showAddMessageDialog: false,
      //编辑留言
      showbjMessageDialog: false,
      //查看留言
      showckMessageDialog: false,
      meaasgeText: "",
      courseYpr: "",
      course: "",
    };
  },
  created() {
    this.selectApply();
  },
  mounted() {
    this.selectApply();
  },
  computed: {
    ...mapGetters(["userInfo"]),
  },
  methods: {
    buttonClick(type, black, index) {
      this.message = {};
      console.log(black, "black");
      this.message = {
        // id: this.tableData[0].shspeeds[0].id,
        id: black.id,
        checkremark: black.checkremark,
        leaving: black.leaving,
        index: index,
      };
      if (type === "留言") {
        this.showAddMessageDialog = true;
        console.log(this.message);
      } else if (type === "查看") {
        (this.showckMessageDialog = true), console.log(this.message);
      } else if (type === "编辑") {
        this.showbjMessageDialog = true;
        console.log(this.message);
      } else if (type === "删除") {
        this.textDelete(black.id);
      }
    },
    checkAll() {
      this.tableData = this.tableData.map((item) => {
        return { ...item, checked: this.checkedStatus };
      });
    },
    teaSubmit(modifyid) {
      let status = 1;
      let id = modifyid
      
      insertCourseModify(status,id).then((res) => {
        this.tableData = res.data.data;
        this.$message({
          showClose: true,
          message: "提交成功",
          type: "success",
        });

        this.selectApply();
      });

      // if (type === "通过") {
      //   // obj.status = "0";

      //   this.updateStatus(obj);
      // }
    },
    updateStatus(obj) {
      hcheckUpdate(obj).then((res) => {
        if (res.status == 200) {
          this.getSelectCondition();
        }
      });
    },
    rejectUpdat(id, index) {
      let shspeeds = this.tableData[index].shspeeds;
      let arr = [];
      let obj;
      for (const shspeedsKey in shspeeds) {
        if (+shspeeds[shspeedsKey].chstatus === 1) {
          let checkuser = shspeeds[shspeedsKey].checkuser.split(":")[0];
          obj = {
            label: shspeeds[shspeedsKey].sort,
            value: checkuser,
            id: this.tableData[index].did,
          };
          arr.push(obj);
        }
        this.reportTypepss = arr;
      }
      console.log(this.reportTypepss);
    },
    selectApply() {
      let obj = {
        termid: this.termid,
        studytype: this.studytype,
        modifystrtus: this.modifystrtus,
        roleId: this.roleId,
        status: this.status,
        xueqi: this.xq,
        grade: this.grade,
        level: this.specialty,
        name: this.stuName,
      };
      queryTeacherCourseCheck(obj).then((res) => {
        this.tableData = res.data.data;

        for (let i = 0; i < this.tableData.length; i++) {
          for (let x = 0; x < this.tableData[i].shspeeds.length; x++) {
            let role_id = this.userInfo.role_id;
            let roleId = this.tableData[i].shspeeds[x].roleId;
             console.log(this.role_id, 777);
            let shspeeds = this.tableData[i].shspeeds
            console.log(shspeeds[x],222);
            this.roleId = this.tableData[i].shspeeds[x].roleId;
            this.status = this.tableData[i].shspeeds[x].status;
            // shspeeds[x] = {
         
            //   checktime: shspeeds[x].audittime.split("T")[0],
            //   chenckdate: shspeeds[x].audittime.split("T")[1],
            //   id: shspeeds[x].id,
            //   checkremark: shspeeds[x].leaving,
            //   checkuser: shspeeds[x].reviewer,
            //   chstatus: shspeeds[x].status,
            //   sort: shspeeds[x].sort,
            //   roleId: shspeeds[x].roleId,
            // }
            if (role_id == roleId) {
              this.tableData[i].id = this.tableData[i].shspeeds[x].id;
              this.tableData[i].status = this.tableData[i].shspeeds[x].status;
              // console.log(this.tableData[i].shspeeds[x].status, 11111111111253);
              console.log(this.tableData, 11111111111);
                     console.log(this.role_id, 8);
            }
          }
        }

        // console.log("输出", this.tableData);
      });
    },
    textSelect(cpId) {
      let obj = {
        id: this.message.id,
        leaving: this.message.leaving,
      };
      updateMessage(obj).then((res) => {
        this.showbjMessageDialog = false;
        if (res.status == 200) {
          this.selectApply();
          this.$message({
            showClose: true,
            message: "编辑成功",
            type: "success",
          });
        }
      });

      getCheckDetail(cpId).then((res) => {
        this.text = res.data.data.leaving;
      });
      this.showckMessageDialog = true;
    },
    textUpdate(cpId) {
      getCheckDetail(cpId).then((res) => {
        this.text = res.data.data.leaving;
      });
      this.pid = cpId;
      // this.showbjMessageDialog = true;
    },
    textDelete() {
      let obj = {
        //  id: this.tableData[0].shspeeds[0].id,
        // leaving: this.message.text
        id: this.message.id,
        // leaving: ,
        leaving: "",
      };
      // this.showbjMessageDialog = false;
      hcheckUpdate(obj).then((res) => {
        if (res.status == 200)
          this.$message({
            showClose: true,
            message: "删除成功",
            type: "success",
          });
        this.selectApply();
      });
    },
    addText() {
      // this.showAddMessageDialog = false;
      // this.message.leaving = this.message.text
      let obj = {
        id: this.tableData[this.message.index].shspeeds[0].id,
        leaving: this.message.text,
      };
      addMessage(obj).then((res) => {
        if (res.status == 200) {
          this.showAddMessageDialog = false;

          this.selectApply();
          this.$message({
            showClose: true,
            message: "添加成功",
            type: "success",
          });
        }
      });
    },
    update() {
      this.showbjMessageDialog = false;
      hcheckUpdate(this.message).then((res) => {
        if (res.data.code == 200) {
          this.$message({
            showClose: true,
            message: "操作成功",
            type: "success",
          });
          this.selectApply();
        }
      });
    },
    change() {
      this.$nextTick(() => {
        let nodelist = document.querySelectorAll(".el-select__tags-text");
        if (nodelist.length >= 2) {
          nodelist[1].innerText = `(已选${this.zt.length})`;
        }
      });
    },
    open(str) {
      this.$confirm(str, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "保存成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消保存",
          });
        });
    },

    RouterTo(path, plan) {
      this.$router.push({
        path: path,
        query: {
          cId: plan,
        },
      });
    },
    toChangePlanDetail() {
      this.$router.push("/teacher/assessment/changePlanDetail");
    },
  },
};
</script>


<style lang="less" scoped>
@import "../../../styles/plan.less";
@import "../../../styles/plan-record.less";

.message-container {
  > div {
    display: inline-block;

    &:nth-child(1) {
      padding-left: 111px;
      font-size: 20px;
      color: rgba(0, 76, 167, 1);
      font-weight: bold;
      vertical-align: top;
      // cursor: pointer;
    }

    &:nth-child(2) {
    }
  }
}
</style>
